<template>
  <div>
    <header>
      <div id="header-logo">Bitmart NFT Market</div>
      <div id="chat-message-float-button">
        <svg
          viewBox="0 0 24 24"
          class="chat-icon"
          style="width: 20px; height: 20px"
        >
          <path
            fillrule="evenodd"
            cliprule="evenodd"
            d="M3 3h18v14h-9l-5 5v-5H3V3zm15 3H6v2.5h12V6zm0 5.5H6V14h12v-2.5z"
            fill="currentColor"
          ></path>
        </svg>
      </div>
      <div id="header-toolbox">
        <svg
          id="header-search"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          cursor="pointer"
          class="recomend-title-arrow"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11 6a5 5 0 110 10 5 5 0 010-10zm0-3a8 8 0 017.021 11.838l3.07 3.07-1.59 1.591-1.591 1.591-3.07-3.07A8 8 0 1111 3z"
            fill="currentColor"
          ></path>
        </svg>
        <img src="@/assets/menu.png" id="header-menu" />
      </div>
    </header>
    <a-carousel :autoplay="true" ref="carousel">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
    </a-carousel>

    <!--recommend Artist title -->
    <section-header :title="'Recommended Creators'" />
    <a-carousel :auto-play="false" class="ant-carousel2">
      <template v-for="item in artistCollection" :key="item.avatarUrl">
        <carousel-item
          :avatarUrl="item.avatarUrl"
          :coverUrl="item.bannerUrl"
          :nickName="item.nickName"
          :description="item.description"
        />
      </template>
    </a-carousel>

    <!-- Trending -->
    <section-header :title="'Trending'" />
    <a-carousel :auto-play="false" class="ant-carousel2">
      <template v-for="item in recommendCollection" :key="item.avatarUrl">
        <carousel-item
          :avatarUrl="item.avatarUrl"
          :coverUrl="item.bannerUrl"
          :nickName="item.layerName"
          :description="item.description"
        />
      </template>
    </a-carousel>
    <div>{{ response }}</div>
  </div>
</template>
<script>
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import CarouselItem from "./CarouselItem.vue";
import SectionHeader from "./SectionHeader.vue";
export default defineComponent({
  components: { CarouselItem, SectionHeader },
  setup() {
    // _this = this
    console.log("this" + this);
    let router = useRouter();
    let route = useRoute();
    let response = ref("pending response");
    let artistCollection = ref([]);
    let recommendCollection = ref([]);
    onMounted(() => {
      let collection =
        "https://www.binance.com/bapi/nft/v1/public/nft/home-collection";
      let homepage =
        "http://localhost:3000/";
      let artist = "https://www.binance.com/bapi/nft/v1/public/nft/home-artist";

      fetch(homepage )
      .then((res)=> res.json())
      .then((res)=>{
        console.log("response:"+JSON.stringify(res))
      })
      .catch((err)=>{
        console.log("error:"+err)
      })
      fetch(artist)
        .then((res) => res.json())
        .then((json) => {
          response.value = json.data.data.length;
          artistCollection.value = json.data.data;
        })
        .catch((err) => {
          response.value = err;
        });

      fetch(collection)
        .then((res) => res.json())
        .then((json) => {
          recommendCollection.value = json.data;
        })
        .catch((err) => {
          // console.log(err);
        });

      fetch(
        "https://www.binance.com/bapi/nft/v1/public/nft/homepage/announce?cursor=2"
      )
        .then((res) => res.json())
        .then((json) => {
          // console.log(json);
        });
    });

    // 利用ref指向 a-carousel组件
    let carousel = ref(null);
    let clickArtist = (url) => {
      alert(url);
    };
    return {
      carousel,
      response,
      artistCollection,
      recommendCollection,
      clickArtist,
    };
  },
});
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
header {
  width: 100%;
  display: flex;
  height: 3rem;
  flex-direction: row;
  background: rgb(240, 240, 240);
  justify-content: space-evenly;
}
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}
.slick-dots li button {
  width: 6px;
  height: 6px;
  border-radius: 100%;
}
.slick-dots li.slick-active button {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: red;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: rgb(201, 24, 24);
  background-color: rgba(187, 102, 45, 0.11);
  opacity: 0.8;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel2 :deep(.slick-slide) {
  text-align: center;
  height: 313px;
  line-height: 160px;
  background: rgb(163, 216, 249);
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}

#header-logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}
#header-toolbox {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#header-search {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 15px;
}
#header-menu {
  width: 1rem;
  height: 1rem;
  margin-right: 1rem;
}
#chat-message-float-button {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  background: yellow;
  border-radius: 50%;
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  z-index: 9;
  justify-content: center;
  align-items: center;
}
</style>